<template>
	<view>
		<u-sticky>
			<view class="tabs">
				<text class="tabItem" :class="{active : item.memberCouponStatus == memberCouponStatus}"
					v-for="(item, index) in tabs" :key="index" @click="changeTab(item.memberCouponStatus)">{{item.title}}</text>
			</view>
		</u-sticky>


		<view class="couponContent">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<coupon-item v-for="(item, index) in list" :key="item.couponId" :couponInfo="item" :viewType="2" :memberCouponStatus="memberCouponStatus"
					@getCoupon="getCoupon"></coupon-item>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import couponItem from '@/components/coupon/coupon-item.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiMemberCoupon
	} from '@/api/coupon-api.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			couponItem
		},
		data() {
			return {
				memberCouponStatus: 1,
				tabs: [{
						title: '已使用',
						memberCouponStatus: 1
					},
					{
						title: '已过期',
						memberCouponStatus: 2
					}
				],
				list: []
			}
		},
		onLoad() {

		},
		methods: {
			/* 获取优惠券列表 */
			upCallback(page) {
				apiMemberCoupon({
					tenantId: this.$store.state.user.tenantId,
					pageNo: page.num,
					pageSize: page.size,
					couponCategory: 0,
					memberCouponStatus: this.memberCouponStatus
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			changeTab(memberCouponStatus) {
				this.memberCouponStatus = memberCouponStatus;
				this.mescroll.triggerDownScroll();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: #F5F5F5;

		.tabItem {
			font-size: 28rpx;
			text-align: left;
			font-weight: bold;
			color: #666666;

			&.active {
				font-size: 32rpx;
				font-weight: bold;
				text-align: left;
				color: #3788ff;
			}
		}
	}

	.couponContent {
		margin: 20rpx;
	}
</style>
